<template>
  <div id="app">
   <el-container>

        <el-header height="60px" style="border-bottom:1px solid grey;text-align:right;line-height: 60px;margin-right: 10px;vertical-align: middle; ">
           <Head></Head>
        </el-header>
     <el-container :style="{height:height +'px'}">
        <el-aside width="200px" style="border-right: 1px solid grey">
       <Menu></Menu>
        </el-aside>
         <el-main>
           <router-view></router-view>
         </el-main>

     </el-container>
     <el-footer height="60px" style="border-top: 1px solid grey">

     </el-footer>
   </el-container>
  </div>
</template>

<script>
import ElHeader from "../node_modules/element-ui/packages/header/src/main.vue";
import ElContainer from "../node_modules/element-ui/packages/container/src/main.vue";
import ElAside from "../node_modules/element-ui/packages/aside/src/main.vue";
import ElMain from "../node_modules/element-ui/packages/main/src/main.vue";
import ElFooter from "../node_modules/element-ui/packages/footer/src/main.vue";
import ElPopover from "../node_modules/element-ui/packages/popover/src/main.vue";
import ElDropdown from "../node_modules/element-ui/packages/dropdown/src/dropdown.vue";
import ElDropdownMenu from "../node_modules/element-ui/packages/dropdown/src/dropdown-menu.vue";
import ElDropdownItem from "../node_modules/element-ui/packages/dropdown/src/dropdown-item.vue";
import Head from "./components/Head.vue";
import Menu from "./components/Menu.vue";

export default {
  components: {Menu, Head},
  data(){

    return{
      height:0
    }
  },
  //脚手架支持es6的语法
  mounted(){
    //页面挂载之后，计算中间的高度，让高度自适应
    this.height = document.documentElement.clientHeight-130;
    var that = this;
    window.onresize = function(){
      that.height = document.documentElement.clientHeight-130;
    }
  },
  comments:{
    ElDropdownItem,
    ElDropdownMenu,
    ElDropdown,
    ElPopover,
    ElFooter,
    ElMain,
    ElAside,
    ElContainer,
    ElHeader,
    Head,
    Menu
  },
  name: 'App',


}
</script>

<style>

  a{
    text-decoration: none;
  }
</style>
